<template>
    <div class="wrapper clearfix">
        <div class="statute-right">
            <div class="chapter"></div>
            <div class="latest-news">
                <p class="latest-title">最近文章</p>
                <ul class="news-wrapper">
                    <li v-for="news in newsList"><a href="javascript:;" class="ellipsis">{{news.name}}</a></li>
                </ul>
            </div>
        </div>
        <div class="statute-left">
            <div class="statute-title">
                <h2>WHO（世界卫生组织）开始试点治疗癌症的生物仿制药的预认证</h2>
                <p>作者：译者：Werner 审稿：Fairy  |  2017-05-04  |  浏览次：49</p>
            </div>
            <article class="article">

            </article>
            <div class="comprehensive">
                <div class="comprehensive-header">
                    <ul>
                        <li @click="comprehensiveType = 1"
                            class="evaluation"
                            :class="{'is-active':comprehensiveType == 1}">
                            <i></i>评价
                        </li>
                        <li @click="comprehensiveType = 2"
                            class="note"
                            :class="{'is-active':comprehensiveType == 2}">
                            <i></i>笔记
                        </li>
                        <li @click="comprehensiveType = 3"
                            class="message"
                            :class="{'is-active':comprehensiveType == 3}">
                            <i></i>留言
                        </li>
                    </ul>
                </div>
                <div clas="evaluation-block" v-show="comprehensiveType == 1">
                    <div class="eval-wrapper">
                        <div class="wr-item" v-if="evaluationList.length != 0">
                            <div class="wrapper-header">
                                <div class="avatar">
                                    <Avatar icon="person" size="large" />
                                </div>
                                <div class="person">
                                    <p class="name">Toby</p>
                                    <Rate value="5" show-text>
                                        <span v-if="value == 1">Unhelpful</span>
                                        <span v-if="value == 2">Not very helpful</span>
                                        <span v-if="value == 3">Fairyly helpful</span>
                                        <span v-if="value == 4">Helpful</span>
                                        <span v-if="value == 5">Very helpful</span>
                                    </Rate>
                                </div>
                            </div>
                        </div>
                        <div class="no-more" v-else>
                            <p>暂无评价~</p>
                            <div class="btn-block">
                                <Button type="success" size="small" @click="showDialog(1)">
                                    <Icon type="edit" size="14"></Icon>去评价
                                </Button>
                            </div>
                        </div>
                    </div>
                </div>
                <div clas="note-block" v-show="comprehensiveType == 2">
                    <div class="note-wrapper">
                        <div class="wr-item" v-if="noteList.length != 0">
                            <div class="wrapper-header clearfix">
                                <div class="avatar">
                                    <Avatar icon="person" size="large" />
                                </div>
                                <div class="person">
                                    <p class="name line-more">Toby</p>
                                </div>
                            </div>
                            <div class="content">文字内容文字内容文字内容文字内容文字内容</div>
                        </div>
                        <div class="no-more" v-else>
                            <p>暂无笔记~</p>
                            <div class="btn-block">
                                <Button type="success" size="small" @click="showDialog(2)">
                                    <Icon type="edit" size="14"></Icon>写笔记
                                </Button>
                            </div>
                        </div>
                    </div>
                </div>
                <div clas="note-block" v-show="comprehensiveType == 3">
                    <div class="note-wrapper">
                        <div class="message-modal clearfix" v-if="messageList.length != 0">
                            <div class="message-header">
                                <div class="avatar">
                                    <Avatar shape="square" icon="person" size="large" />
                                    <p class="name">Toby</p>
                                    <p class="time">1天前</p>
                                </div>
                            </div>
                            <div class="message-body">
                                <p class="content">文字内容</p>
                                <div class="leave-word clearfix">
                                    <div class="avatar">
                                        <Avatar shape="square" icon="person" />
                                    </div>
                                    <div class="leave-main">
                                        <p class="name">Tony</p>
                                    </div>
                                    <p class="content">文字内容文字内容文字内容文字内容文字内容文字内容</p>
                                </div>
                            </div>
                        </div>
                        <div class="no-more" v-else>
                            <p>暂无留言~</p>
                            <div class="btn-block">
                                <Button type="success" size="small" @click="showDialog(3)">
                                    <Icon type="edit" size="14"></Icon>去留言
                                </Button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Modal v-model="dialogForm" :title="dialogTitle">
            <div class="dialog-body">
                <Rate v-model="evaluate" show-text v-if="whichForm == 1">
                    <span v-if="evaluate == 1">Unhelpful</span>
                    <span v-if="evaluate == 2">Not very helpful</span>
                    <span v-if="evaluate == 3">Fairyly helpful</span>
                    <span v-if="evaluate == 4">Helpful</span>
                    <span v-if="evaluate == 5">Very helpful</span>
                </Rate>
                <Form :model="noteData" v-if="whichForm == 2">
                    <FormItem>
                        <Input v-model="noteData.note" :rows="5" type="textarea" placeholder="写笔记..."></Input>
                    </FormItem>
                </Form>
                <Form :model="msg" v-if="whichForm == 3">
                    <FormItem>
                        <Input v-model="msg.message" :rows="5" type="textarea" placeholder="写留言..."></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button type="ghost" @click="close">关闭</Button>
                <Button type="primary" @click="save">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script type="text/javascript">
    export default{
        data(){
            return{
                newsList:[],
                evaluationList:[],
                noteList:[],
                messageList:[],
                comprehensiveType:1,
                dialogForm:false,
                dialogTitle:'',
                whichForm:0,
                evaluate:0,
                noteData:{
                    note:''
                },
                msg:{
                    message:''
                }
            }
        },
        created(){
            this.initNews();
        },
        methods:{
            initNews(){
                this.$http.get('/news/list',{
                    params: {
                        include:'category'
                    }
                }).then(response => {
                    var data = response.data;
                    this.newsList = data.data;
                }).catch(err => {

                })
            },
            save(){

            },
            showDialog(type){
                switch(type){
                    case 1:this.dialogTitle = '评价';break;
                    case 2:this.dialogTitle = '笔记';break;
                    case 3:this.dialogTitle = '留言';break;
                }
                this.whichForm = type;
                this.dialogForm = true;
            },
            close(){
                this.dialogForm = false;
            }
        }
    }
</script>
<style type="text/css" scoped>
    .wrapper{ max-width:1200px; margin:40px auto; padding:0 30px;}
    .statute-left{ margin-right:400px;}
    .statute-right{ width:368px;float:right; margin-top:65px;}
    .chapter{ height:400px; background:#fff; box-shadow:0 2px 8px rgba(96,96,96,0.4);border-radius:3px;}
    .statute-title h2{ text-align:center; font-size:18px; line-height:1.5;}
    .statute-title p{ text-align:center; color:#666; font-size:12px; line-height:1.2;}
    .article{ width:100%; height:722px; margin-top:24px; background:#fff; box-shadow:0 2px 8px rgba(96,96,96,0.4); border-radius:3px;}
    .latest-news{ margin-top:30px; line-height:2; padding:0 10px;}
    .latest-title{ font-weight:bold; font-size:16px;}
    .news-wrapper li a{ display:block;}
    .news-wrapper li a:hover{ color:#15ccac;}
    .btn-block{ margin-top:10px; }
    .comprehensive{ margin-top:50px;}
    .comprehensive-header{ padding:20px;  background:#e9f9f6;}
    .comprehensive-header ul li{ display:inline-block; margin-right:45px; line-height:20px; font-size:16px; cursor: pointer;}
    .comprehensive-header .is-active{ color:#14a88c;}
    .comprehensive-header ul li:not(.is-active):hover{ color:#666; }
    .comprehensive-header ul li i{ width:20px; height:20px; float: left; margin-right:7px; background:url('../../assets/images/icon/spirit.png') no-repeat;}
    .comprehensive-header .evaluation i{ background-position:0 0;}
    .comprehensive-header .evaluation.is-active i{ background-position:0 -20px;}
    .comprehensive-header .note i{ background-position:-20px 0; }
    .comprehensive-header .note.is-active i{ background-position:-20px -20px;}
    .comprehensive-header .message i{ background-position:-40px 0; }
    .comprehensive-header .message.is-active i{ background-position:-40px -20px;}
    .avatar{ float:left;}
    .person{ margin-left: 50px; height:40px;}
    .name{ font-size:16px; margin-bottom:2px;}
    .content{ line-height:22px; margin-top:10px;}
    .wr-item{ padding:20px; border-bottom:1px solid #999;}
    .wr-item .time{ margin-top:25px; color:#999;}
    .no-more{ color:#999; padding:50px; text-align:center;}
    .no-more .ivu-icon{ margin-right:2px; }
    .ivu-rate-text span{ font-size:14px; }
    .line-more{ line-height:40px; }
    .message-modal{ padding:20px 20px 20px 0; margin-left:15px; border-bottom:1px solid #ccc;}
    .message-header{ float: left; padding-right: 40px; border-right: 1px solid #ccc;}
    .message-header .name{ color:#14a88c; text-align:center; margin: 14px 0;}
    .message-header .time{ color:#666; font-size:12px; text-align:center;}
    .message-body{ margin-left:120px;}
    .message-body .content{ margin:0;}
    .leave-word{ margin-top:24px; }
    .leave-main{ margin-left:44px; }
    .leave-main .name{ line-height:32px; }
    .leave-word .content{ margin-top:10px; }
</style>